<template>
    <div class="basic-search fullContent mtb10 mlr10">
        <Layout :total="totalCount" @setHeight="setTableHeight" @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange" ref="layout" showHightSearch="noKeyword">
            <template slot="btnSort">
                <el-button type="primary" @click="doExport()" title="导出">导出</el-button>
                <el-button @click="selectScreen" title="场景选择">场景选择</el-button>
            </template>
            <template slot="expandSearch">
                <FormGenerate ref="form" @searchResult="searchResult" @reset="resetResult"
                    :renderFormRule="renderFormRule" :span="6" :searchGroup="true" :lableWidth="150" />
            </template>
            <template slot="mainContent">
                <alarmStaticOne v-if="searchParam.radio==1" :tableData="tableData"></alarmStaticOne>
                <alarmStaticTwo v-if="searchParam.radio==2" :tableData="tableData"></alarmStaticTwo>
                <alarmStaticThree v-if="searchParam.radio==3" :tableData="tableData"></alarmStaticThree>
                <alarmStaticFour v-if="searchParam.radio==4" :tableData="tableData"></alarmStaticFour>
            </template>
        </Layout>

        <selectScreen ref="selectScreen" @changeSelect="changeSelect"></selectScreen>
    </div>
</template>

<script>
    import Layout from 'oss-common/components/Layout'
    import FormGenerate from 'oss-common/components/FormGenerate'
    import Data from '@/common/data.js';
    import alarmStaticOne from './components/alarmStaticOne.vue';
    import alarmStaticTwo from './components/alarmStaticTwo.vue';
    import alarmStaticThree from './components/alarmStaticThree.vue';
    import alarmStaticFour from './components/alarmStaticFour.vue';
    import selectScreen from './components/selectScreen.vue';



    import {
        getUrl1,
        exportFile,
        getGUrl1,
        exportFile1
    } from '@/api/data.js';
    export default {
        components: {
            Layout,
            FormGenerate,
            alarmStaticOne,
            alarmStaticTwo,
            alarmStaticThree,
            alarmStaticFour,
            selectScreen
        },
        data() {
            return {
                totalCount: "",
                tableData: "",

                searchParam: {
                    radio: "1",
                    pageNo: 1,
                    pageSize: 20,
                    needTotal: true,

                },
                renderFormRule: {
                    // 单选下拉
                    cityName: {
                        label: '地市',
                        value: null,
                        type: 'select',
                        filterable: true,
                        placeholder: this.$t('choosePlaceholder'),
                        option:this.$store.state.cityarr,
                        labelName: 'regionName',
                        valueKey: 'regionName'
                    },

                    lidu: {
                        label: '粒度',
                        value: null,
                        type: 'select',
                        filterable: true,
                        placeholder: this.$t('choosePlaceholder'),
                        option: [{
                            descName: "月粒度",
                            value: "month"
                        }, {
                            descName: "周粒度",
                            value: "week"
                        }],
                        labelName: 'descName',
                        valueKey: 'value'
                    },


                    timeRange: {
                        label: '时间',
                        value: null,
                        type: 'datePicker',
                        datePickerType: 'datetimerange',
                        valueFormat: 'yyyy-MM-dd',
                        format: 'yyyy-MM-dd',
                    },
                },

                type: 'add'
            }
        },
        methods: {
            changeSelect(e) {

                this.searchParam.radio = e;
                this.queryList(e)

            },
            selectScreen() {
                console.log(this.$refs.selectScreen.params, 2222)
                this.$refs.selectScreen.params = true
            },

            /**
             * 点击查询，查询列表
             */
            searchResult(obj) {
                // 分页重置为第一页
                // this.layout.currentPage = 1
                // 查询时，关键字清空，分页重置为第一页
                this.searchParam = Object.assign(
                    JSON.parse(JSON.stringify(obj)), {}, {
                        pageNo: 1,
                        radio: this.searchParam.radio,
                        pageSize: this.searchParam.pageSize,

                        needTotal: true
                    }
                )
                this.queryList()
            },
            /**
             * 点击重置，查询列表
             */
            resetResult(obj) {
                this.layout.keyWord = null
            },
            /**
             * 调用接口查询数据列表
             */

            queryList() {

                if (!this.$refs.form.ruleForm.lidu || !this.$refs.form.ruleForm.timeRange) return this.$message(
                    "请先选择粒度")

                    this.searchParam.city=this.$store.state.city=='浙江'?this.$refs.form.ruleForm.city: this.$store.state.city;
                getUrl1("/wir/public/alarmList.do", this.searchParam)
                    .then((query) => {
                        if (query.success) {
                            this.tableData = query.body.listInfo
                            this.totalCount = query.body.totalCount
                        } else {
                            this.$message.error('查询失败！')
                        }
                    })
                    .catch((error) => {

                    })
            },
            /**
             * 调用接口查询数据列表
             */

            doExport() {
                // 传参数
                if (!this.$refs.form.ruleForm.lidu || !this.$refs.form.ruleForm.timeRange) return this.$message(
                    "请先选择粒度")
                if (this.searchParam.radio == 1) {
                    this.searchParam.exportType = 49;
                } else if (this.searchParam.radio == 2) {
                    this.searchParam.exportType = 50;
                } else if (this.searchParam.radio == 3) {
                    this.searchParam.exportType = 51;
                } else if (this.searchParam.radio == 4) {
                    this.searchParam.exportType = 52;
                }
                this.searchParam.webBatchNo=1;
                this.searchParam.city=this.$store.state.city=='浙江'?this.$refs.form.ruleForm.city: this.$store.state.city;
                exportFile1("/wir/export/onExportData?evtStr=" + encodeURIComponent(JSON.stringify(this.searchParam)))
            },
            /**
             * pagesize触发查询
             */
            handleSizeChange(val) {
                this.searchParam.size = val
                this.queryList()
            },
            /**
             * 分页查询
             */
            handleCurrentChange(val) {
                this.searchParam.page = val
                this.queryList()
            },

            // 设置表格高度
            setTableHeight(height) {
                this.tableHeight = height - 40
            }
        },
        mounted() {
            // this.queryList()
        }
    }
</script>

<style lang="scss" scoped>
    @import 'oss-common/theme/const-theme.scss';
</style>
